<template>
   <div class="wrap">
      <myHead title="积分"></myHead>
      <div class="box_top">
         <p></p>
         <p>{{this.$store.state.userInfo.score}}<span>积分</span></p>
         <p>积分也可以在积分商城兑换礼品喔</p>
      </div>
      <div class="itemWrap">
         <div class="item_tit">积分细明</div>
         <div class="item_item">
            <p>积分</p><p>详细说明</p><p>记录时间</p>
         </div>
         <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    id="v-list"
                    :style="{height:$store.state.minHeight-3.5+'rem'}"
            >
               <div v-for="(item,y) in list" class="item_item item_item1">
                  <p>{{item.type==1?'+'+item.the_integral:'-'+item.the_integral}}</p><p>{{item.type==1?'下单积分':'兑换积分'}}</p><p>{{item.addtime | formatDate}}</p>
               </div>
            </van-list>
         </van-pull-refresh>
      </div>
      <div class="btn" @click="jump('integral')">积分兑换商品</div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    import {formatDate} from '../../methods/time'
    export default {
        name: "IntegralRecord",
        filters: {
            formatDate(time) {
                time = time * 1000;
                let date = new Date(time);
                return formatDate(date, 'yyyy/MM/dd')
            }
        },
        components: {
            myHead
        },
        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                refreshing: false,
                page:1
            }
        },
        created() {

        },
        methods: {
            jump(page) {
                this.$router.push({
                    name: page
                })
            },
            onLoad() {
                // console.log(this.page)
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                    this.page = 1;
                }
                this.$myAxios('index/Integral/integral_log', 'post', {
                    user_id: this.$myStorage.query(),
                    page: this.page
                }).then(res => {
                    // console.log(res.data);
                    if (res.data.state == '1') {
                        if(res.data.integral_order.data.length < 1){
                            this.finished = true;
                            this.loading = false;
                            return;
                        }
                        this.page+=1;
                        // console.log(6666,this.page)
                        var arr = res.data.integral_order.data;
                        for (var i = 0; i < arr.length; i++) {
                            this.list.push(arr[i]);
                        }
                        this.loading = false;
                    } else {
                        this.$myNotice('请检查网络~',1500)
                    }
                });
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.page = 1;
                this.onLoad();
            },
        }
    }
</script>

<style scoped>
   .wrap {
      width: 100%;
      min-height: 6.67rem;
      box-sizing: border-box;
      padding-top: .49rem;
   }

   .box_top {
      text-align: center;
      width: 100%;
      box-sizing: border-box;
      padding-left: .2rem;
      height: 1.4rem;
      background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }

   .box_top > p:nth-child(1) {
      text-align: right;
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
      padding-right: .15rem;
      color: #FFFFFF;
      height: .4rem;
      line-height: .4rem;
   }

   .box_top > p:nth-child(2) {
      font-size: .36rem;
      font-family: PingFang SC;
      font-weight: 800;
      color: #FFFFFF;
   }

   .box_top > p:nth-child(2) > span {
      font-size: .18rem;
   }

   .box_top > p:nth-child(3) {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      height: .5rem;
      line-height: .5rem;
   }

   .itemWrap {
      background-color: #FFFFFF;
   }

   .item_tit {
      padding: 0 .15rem;
      height: .5rem;
      line-height: .5rem;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      box-sizing: border-box;
      border-bottom: .01rem solid #D4D4D4;
   }

   .item_item {
      display: flex;
      flex-flow: row;
      align-items: center;
      height: .5rem;
      box-sizing: border-box;
      border-bottom: .01rem solid #D4D4D4;
   }

   .item_item > p {
      color: #333333;
      text-align: center;
      line-height: .5rem;
      font-weight: bold;
   }

   .item_item > p:nth-child(1), .item_item > p:nth-child(2) {
      width: 25%;
   }

   .item_item > p:nth-child(3) {
      width: 50%;
   }

   .item_item1 > p {
      color: #666666 !important;
      font-weight: 400 !important;
   }

   .btn {
      width: 2.6rem;
      height: .4rem;
      background: linear-gradient(89deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
      box-shadow: 0 .01rem .05rem 0 rgba(0, 0, 0, 0.21);
      border-radius: .2rem;
      color: #FFFFFF;
      text-align: center;
      line-height: .4rem;
      font-size: .16rem;
      font-family: PingFang SC;
      font-weight: 500;
      margin: .1rem auto 0;
   }
   /* 懒加载适配 */
   >>> .van-cell {
      padding: 0;
      line-height: 0;
      /*font-size: 0;*/
   }
   >>> .van-list__loading {
      font-size: .14rem;
      line-height: .5rem;
   }
   >>> .van-loading__spinner--circular{
      width: .16rem;
      height: .16rem;
   }
   >>> .van-loading__text {
      font-size: .14rem;
      margin-left: .08rem;
   }
   >>> .van-cell:not(:last-child)::after {
      border-bottom: none;
   }
   >>> .van-cell:nth-last-child(1) .item-line {
      /*margin-bottom: .1rem;*/
      display: none;
   }
   #v-list {
      overflow-x: hidden;
   }
</style>
